<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
    <script src="/public/js_module/echarts.min.js"></script>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin" id="app">
        <%- include('header') %>
        <%- include('menu') %>


        <div class="layui-body layui-bg-gray">
            <div class="layui-row" style="background-color: #fff">
                <!--总业绩-->
                <div class="layui-card layui-col-md6 ">
                    <div class="layui-card-header layui-bg-gray">
                        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between">
                            <div>系统总业绩</div>
                            <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: center;width: 13vw">
                                <input type="text" placeholder="选择统计时间段" class="layui-input" id="all_date">
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="all_gauge" style="width: 600px;height:400px;"></div>
                    </div>
                </div>

                <!--总业绩 折线图-->
                <div class="layui-card layui-col-md6">
                    <div class="layui-card-header layui-bg-gray">
                        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between">
                            <div>系统总业绩 - 折线图</div>
                            <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: center">
                                <select @change="getAllAchievmentsLine" id="all_select" name="all_select" lay-verify="">
                                    <option value="">统计时间（月/日）</option>
                                    <option value="0">  按月统计 </option>
                                    <option value="1">  按日统计 </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between">
                            <input type="text" placeholder="选择统计时间段 - 年" class="layui-input" id="all_date_year">
                            <input type="text" placeholder="选择统计时间段 - 月" class="layui-input layui-col-md-offset3" id="all_date_month">
                        </div>
                        <div id="all_line" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-row" style="background-color: #fff;margin-top: 20px">
                <!--总业绩-->
                <div class="layui-card layui-col-md6 ">
                    <div class="layui-card-header layui-bg-gray">
                        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between">
                            <div>中心、门店总业绩</div>
                            <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: flex-end">
                                <select id="center_select" @change="centerChange" name="center_select" lay-verify="">
                                    <option value="">选择统计中心</option>
                                    <option :value="item.id" v-for="(item ,index) in centers">  {{item.name}} </option>
                                </select>
                                <select id="store_select" @change="storeChange" style="margin-left: 10px;" name="store_select" lay-verify="">
                                    <option value="">选择统计门店</option>
                                    <option :value="item.id" v-for="(item ,index) in stores">  {{item.name}} </option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: flex-end">
                            <input type="text" placeholder="选择统计时间段" class="layui-input layui-col-md-offset8" id="one_date">
                        </div>
                        <div id="one_gauge" style="width: 600px;height:400px;"></div>
                    </div>
                </div>

                <!--总业绩 折线图-->
                <div class="layui-card layui-col-md6">
                    <div class="layui-card-header layui-bg-gray">
                        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between">
                            <div>中心、门店总业绩 - 折线图</div>
                            <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: center">
                                <select @change="getOneAchievmentsLine" name="one_select" id="one_select" lay-verify="">
                                    <option value="">统计时间（月/日）</option>
                                    <option value="0">  按月统计 </option>
                                    <option value="1">  按日统计 </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between">
                            <input type="text" placeholder="选择统计时间段 - 年" class="layui-input" id="one_date_year">
                            <input type="text" placeholder="选择统计时间段 - 月" class="layui-input layui-col-md-offset3" id="one_date_month">
                        </div>
                        <div id="one_line" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>

            <!-- 内容主体区域 -->
            <div style="padding: 15px;">

            </div>
        </div>


      <%- include('footer') %>
    </div>
    <%- include('script') %>
    <script type="text/javascript">
        var allGauge,allLine,oneGauge,oneLine;
        var vm = new Vue({
            el:'#app',
            data:function () {
                return {
                    centers:[],
                    stores:[]
                }
            },
            mounted:function () {
                var self = this;
                this.getAllAchievments();
                this.getCenters();
                this.getStores('');

                // 基于准备好的dom，初始化echarts实例
                allGauge = echarts.init(document.getElementById('all_gauge'));
                // 指定图表的配置项和数据
                option = {
                    tooltip : {

                    },
                    series: [
                        {
                            name: '总业绩',
                            type: 'gauge',
                            max:10000,
                            detail: {formatter:'{value}'},
                            data: [{value: 5000, name: '完成订单量'}]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                allGauge.setOption(option);


                // 指定图表的配置项和数据
                allLine = echarts.init(document.getElementById('all_line'));
                line_option = {
                    tooltip : {
                        trigger:'axis',
                        formatter:'{b} <br/>{c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    dataZoom:[
                        {
                            type: 'inside',
                            startValue: 0,
                            endValue: 100
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }
                    ],
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                allLine.setOption(line_option);

                oneGauge = echarts.init(document.getElementById('one_gauge'));
                // 指定图表的配置项和数据
                oneGaugeOption = {
                    tooltip : {

                    },
                    series: [
                        {
                            name: '总业绩',
                            type: 'gauge',
                            max:10000,
                            detail: {formatter:'{value}'},
                            data: [{value: 0, name: '完成订单量'}]
                        }
                    ]
                };
                oneGauge.setOption(oneGaugeOption);

                oneLine = echarts.init(document.getElementById('one_line'));
                oneLineOption = {
                    tooltip : {
                        trigger:'axis',
                        formatter:'{b} <br/>{c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    dataZoom:[
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            start: 20,
                            end: 30,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }
                    ],
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                oneLine.setOption(oneLineOption);


                layui.use(['laydate'], function () {
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#all_date' //指定元素
                        ,range:'~'
                        ,done: function(value, date, endDate){
                            self.getAllAchievments(value);
                        }
                    });
                    laydate.render({
                        elem: '#all_date_year' //指定元素
                        ,type:'year'
                        ,done: function(value, date, endDate){
                            self.getAllAchievmentsLine(value,'year');
                        }
                    });
                    laydate.render({
                        elem: '#all_date_month' //指定元素
                        ,type:'month'
                        ,done: function(value, date, endDate){
                            self.getAllAchievmentsLine(value,'month');
                        }
                    });

                    laydate.render({
                        elem: '#one_date' //指定元素
                        ,range:'~'
                        ,done: function(value, date, endDate){
                            self.getOneAchievments(value);
                        }
                    });
                    laydate.render({
                        elem: '#one_date_year' //指定元素
                        ,type:'year'
                        ,done: function(value, date, endDate){
                            self.getOneAchievmentsLine(value,'year');
                        }
                    });
                    laydate.render({
                        elem: '#one_date_month' //指定元素
                        ,type:'month'
                        ,done: function(value, date, endDate){
                            self.getOneAchievmentsLine(value,'month');
                        }
                    });
                })

            },
            methods:{
                getAllAchievments:function (date) {
                    $.ajax({
                    url:'/admin/dashboard/allAchievments',
                    type:'GET',
                    data:{date:date},
                    success:(res)=>{
                        console.info()
                        var allTotal = res.data.total;
                        option.series[0].data[0].value = allTotal;
                        allGauge.setOption(option)
                    }
                    });
                },
                getAllAchievmentsLine:function (value,d) {
                    var type = $('#all_select').val();
                    var year = $('#all_date_year').val();
                    var month = $('#all_date_month').val();
                    if(typeof value != "object"){
                        if(type == 0 && d == 'year'){
                            year = value;
                        }else if(type == 1 && d == 'month'){
                            month = value;
                        }
                    }
                    $.ajax({
                    url:'/admin/dashboard/allAchievmentsLine',
                    type:'GET',
                    data:{
                        type:type,
                        year:year,
                        month:month
                    },
                    success:(res)=>{
                        if(res.code == 200){
                            var xAxis = res.data.xAxis;
                            var yAxis = res.data.yAxis;
                            line_option.series[0].data = yAxis;
                            line_option.xAxis.data = xAxis;
                            allLine.setOption(line_option)
                        }
                    }
                    });
                },
                getOneAchievments:function (date) {
                    var store = $('#store_select').val();
                    var center = $('#center_select').val();
                    $.ajax({
                        url:'/admin/dashboard/oneAchievments',
                        type:'GET',
                        data:{date:date,center:center,store:store},
                        success:(res)=>{
                            var allTotal = res.data.total;
                            oneGaugeOption.series[0].data[0].value = allTotal;
                            oneGauge.setOption(oneGaugeOption)
                        }
                    });
                },
                getOneAchievmentsLine:function (value,d) {
                    var type = $('#one_select').val();
                    var year = $('#one_date_year').val();
                    var month = $('#one_date_month').val();
                    var store = $('#store_select').val();
                    var center = $('#center_select').val();
                    if(typeof value != "object"){
                        if(type == 0 && d == 'year'){
                            year = value;
                        }else if(type == 1 && d == 'month'){
                            month = value;
                        }
                    }
                    $.ajax({
                        url:'/admin/dashboard/oneAchievmentsLine',
                        type:'GET',
                        data:{
                            type:type,
                            year:year,
                            month:month,
                            store:store,
                            center:center
                        },
                        success:(res)=>{
                            if(res.code == 200){
                                var xAxis = res.data.xAxis;
                                var yAxis = res.data.yAxis;
                                oneLineOption.series[0].data = yAxis;
                                oneLineOption.xAxis.data = xAxis;
                                oneLine.setOption(oneLineOption)
                            }
                        }
                    });
                },
                getCenters:function () {
                    $.ajax({
                        url:'/admin/center',
                        type:'GET',
                        data:{isPage:false},
                        success:(res)=>{
                            if(res.code == 0){
                                this.centers = res.data;
                            }
                        }
                    });
                },
                getStores:function (id) {
                    $.ajax({
                        url:'/admin/store',
                        type:'GET',
                        data:{isPage:false,center:id},
                        success:(res)=>{
                            if(res.code == 0){
                                this.stores = res.data;
                            }
                        }
                    });
                },
                centerChange:function (e) {
                    var center = $('#center_select').val();
                    this.getStores(center);
                    var date = $('#one_date').val();
                    this.getOneAchievments(date);
                    this.getOneAchievmentsLine();
                },
                storeChange:function (e) {
                    var date = $('#one_date').val();
                    this.getOneAchievments(date);
                    this.getOneAchievmentsLine();
                },
            }
        })
    </script>

</body>

</html>
